import React, { Component } from 'react'

export default class LifeCycle extends Component {
    // 构造函数 生命周期开始
    constructor(props) {
        super(props)
        this.state = {
            date: 'Old Props',
            hasChild: true
        }
    }

    onPropsChange = () => {
        this.setState({
            date: 'New Props'
        })
    }

    onDestoryChild = () => {
        console.log('销毁组件 ')
        this.setState({
            hasChild: false
        })
    }

    // 渲染 组件已经渲染出来了
    render() {
        return (
            <div>
                生命周期
                <hr />
                {
                    this.state.hasChild ? <Children date={this.state.date} /> : null
                }
                <button onClick={this.onPropsChange}>改变props</button>
                <button onClick={this.onDestoryChild}>销毁组件</button>
            </div>
        )
    }
}

class Children extends Component {
    constructor(props) {
        super(props)
        this.state = {
            date: 'Old State'
        }
        console.log('constructor')
    }
    // 组件将要加载 组件还没有渲染出来，但是js逻辑已经开始执行了，一些js的异步方法可以放在这个周期去执行
    UNSAFE_componentWillMount() {
        console.log('componentWillMount')
    }
    // 组件加载完成 组件已经挂载成功了
    componentDidMount() {
        console.log('componentDidMount')
    }
    // 将要接收父组件传来的props
    UNSAFE_componentWillReceiveProps() {
        console.log('componentWillReceiveProps')
    }
    // 子组件是不是应该更新
    shouldComponentUpdate() {
        console.log('shouldComponentUpdate')
        return true;
    }
    // 组件将要更新
    UNSAFE_componentWillUpdate() {
        console.log('componentWillUpdate')
    }
    // 组件更新完成
    componentDidUpdate() {
        console.log('componentDidUpdate')
    }
    // 组件将要销毁
    componentWillUnmount() {
        console.log('componentWillUnmount')
    }

    // 处理点击事件
    handleClick = () => {
        console.log('更新数据 ')
        this.setState({
            date: 'New State'
        })
    }

    render() {
        console.log('render')
        return (
            <div>
                children
                <br />
                props: {this.props.date}
                <button onClick={this.handleClick}>更新数据</button>
            </div>
        )
    }
}